<!-- 关机 -->
<template>
  <q-dialog
    v-model="visible"
    persistent
    maximized
    transition-show="slide-up"
    transition-hide="slide-down"
  >
    <q-card
      class="text-white no-border bg-brand row justify-evenly items-center content-center"
    >
      <!-- 旋转 -->
      <q-card-section class="row justify-center q-ma-lg">
        <q-spinner-ios
          color="white"
          :size="$q.screen.gt.sm ? '20vw' : '10rem'"
        />
      </q-card-section>
      <div class="column justify-center items-center q-pa-none q-mt-xl">
        <!-- 文字提示 -->
        <q-card-section class="q-ma-lg q-pa-none">
          <div
            class="text-h3 text-center"
            :style="$q.screen.gt.sm ? 'font-size:4vw;height:4vw' : ''"
          >
            {{ $t(lang + "将于") }} {{ second }}
            {{ $t(lang + "秒后退出关机界面") }}
          </div>
          <div
            class="text-h5 q-mt-lg text-center"
            :style="$q.screen.gt.sm ? 'font-size:2vw;height:1vw' : ''"
          >
            {{ $t(lang + "点击左下按钮以关机") }}
          </div>
        </q-card-section>
        <!-- 按钮 -->
        <q-card-section
          class="q-pa-none q-pt-lg q-mt-lg row justify-evenly fit"
        >
          <div class="column justify-center">
            <q-btn
              class="text-white"
              round
              icon="power_settings_new"
              :size="$q.screen.gt.sm ? '3vw' : '2rem'"
              @click="shutDown"
            />
            <p
              class="q-mb-none q-mt-lg text-center"
              :style="$q.screen.gt.sm ? 'font-size:2vw;' : '4rem'"
            >
              {{ $t(lang + "关机") }}
            </p>
          </div>

          <div>
            <q-btn
              class="text-white"
              round
              icon="clear"
              :size="$q.screen.gt.sm ? '3vw' : '2rem'"
              v-close-popup
              @click="visible = flass"
            />
            <p
              class="q-mb-none q-mt-lg text-center"
              :style="$q.screen.gt.sm ? 'font-size:2vw;' : '4rem'"
            >
              {{ $t("cancel") }}
            </p>
          </div>
        </q-card-section>
      </div>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { api } from "boot/axios";
import { useAPIStore } from "stores/api";
import { ref, watch, onUnmounted } from "vue";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";

const t = useI18n().t;
const lang = "indexPage.deviceShutdown.";
const $q = useQuasar();
const visible = ref(false); // dialog弹窗状态
const second = ref(0); // 倒计时
let dateTimer;
defineExpose({ visible });

watch(visible, (value) => {
  if (value === true) {
    second.value = 9;
    countDown();
  }
});

onUnmounted(() => {
  // 清除定时器
  clearTimeout(dateTimer);
});

// 倒计时10秒取消关机
const countDown = function () {
  dateTimer = setTimeout(() => {
    if (visible.value) {
      if (second.value > 0) {
        second.value -= 1;
        countDown();
      } else {
        visible.value = false;
      }
    }
  }, 1000);
};

// 发送关机指令
function shutDown() {
  api.get(useAPIStore().amrUrl + "amr/shutdown").then(
    () => {
      $q.notify({
        message: t(lang + "正在关机"),
        color: "positive",
        position: "top",
      });
    },
    () => {
      $q.notify({
        message: t(lang + "关机失败请稍后再试或强制关机"),
        color: "negative",
        position: "top",
      });
    }
  );
}
</script>

<style scoped>
.bg-brand {
  background-color: rgba(0, 0, 0, 0.7);
}
</style>
